<extend name="$_admin_public_layout"/>

<block name="style">
    <include file="./Application/Common/util/lyf/builder/style.html" />
</block>

<block name="script">
    <script type="text/javascript">
        $(function(){
            $('.auth input[type="checkbox"]').on('change',function(){
                //遍历选中当前权限的子权限
                $('.'+$(this).attr('data-module-name')+' .auth'+$(this).val()).find('input').prop('checked',this.checked);

                //遍历选中当前权限的父权限
                if ($(this).is(':checked') == true) {
                    var $fix = $(this);
                    while ($fix.length > 0) {
                        var $tmp = $fix.closest('div').prev('label').find('input');
                        console.log($tmp);
                        if ($tmp.length > 0) {
                            $tmp.attr("checked",true);
                            $fix = $tmp;
                        } else {
                            break;
                        }
                    }
                }
            });
        });
    </script>
</block>

<block name="main">
    <script type="text/javascript" src="__ROOT__/PUBLIC/Ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__ROOT__/PUBLIC/Ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="__ROOT__/PUBLIC/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
      UE.getEditor('intro_detail',{  //intro_detail为要编辑的textarea的id
        initialFrameWidth: 1000,  //初始化宽度
        initialFrameHeight: 500,  //初始化高度
      });
     
    </script>
        <div class="panel-body">
             <form action="{:url()}" method="post" class="form form-builder" enctype="multipart/form-data">
                <ul class="nav-tabs nav">
                    <li class="active"><a href="#tab1" data-toggle="tab">分类信息</a></li>
                    <neq name="info.id" value="1"><li><a href="#tab2" data-toggle="tab">图片管理</a></li></neq>
                    <!-- <li class="text"><a href="#tab3" data-toggle="tab">详细信息</a></li> -->
                    <!-- <neq name="info.id" value="1"><li><a href="#tab2" data-toggle="tab">图片管理</a></li></neq> -->
                </ul>
                <div class="tab-content">
                    <div id="tab1" class="tab-pane active">
                        <div class="form-group"></div>
                        <neq name="info.id" value="1">
                            
                        <else />
                            <!-- <div class="alert alert-success">{$info.title}拥有后台所有权限</div> -->
                        </neq>
                        <div class="form-group">
                            <label class="left control-label">分类名称：</label>
                            <div class="right">
                                <input type="text" class="form-control input" name="title" value="{$info.title|default=''}" style="width: 480px;display: inline-black;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="left control-label">描述：</label>
                            <div class="right">
                                <!-- <input type="text" class="form-control input" name="title" value="{$info.title|default=''}"> -->
                                <textarea name="describe" id="" cols="80" rows="5" style="width: 480px;display: inline-black;">{$info.describe}</textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="left control-label">是否推荐到主页：</label>
                            <div class="right">
                                是 <input type="radio" name="radio" value="1">

                                否 <input type="radio" name="radio" value="0">
                            </div>
                        </div>
                        
                    </div>
                    
                    <neq name="info.id" value="1">
                        <div id="tab2" class="tab-pane">
                            <!-- <?php if ($info['icon']): ?>
                                <img src="__ROOT__/Uploads/{$info.icon}" alt="" width="200" height="160">
                            <?php else: ?>
                                <img src="__ROOT__/Uploads/admin/default.jpg" alt="" width="200" height="160">
                            <?php endif ?>
                            <br><br>
                            <input style="font-size: 16px;" type="file" name="icon" />(建议图片:200 × 160px) -->
                            <br>
                                        <!-- <input id="file" type="file" name="file"> -->
                                            <?php if ($info['icon']): ?>
                                                <div id="preview">
                                                   <img src="__ROOT__/Uploads/{$info.icon}" alt="" width="200" height="160">
                                                </div>
                                            <?php else: ?>
                                                <div id="preview">
                                                    <img src="__ROOT__/Uploads/admin/default.jpg" alt="" width="200" height="160">
                                                </div>
                                            <?php endif ?>
                                            <div class="inputPic">
                                                <span class="inputjian">上传图片<input type="file" name="icon" onchange="preview(this)" /></span>
                                                <span class="picsize">建议大小:200 × 160 PX </span>
                                            </div>
                                    <style>
                                            #preview{width: 200px;overflow: hidden;margin-bottom: 0.5rem;position: relative;height: 200px}
                                            .inputjian input{display: inline-block;padding: 5px 10px;font-size: 16px;}
                                            #preview span{display: block;width: 0%;position: absolute;bottom:0px;left: 0;height:10px;border-radius: 10px;background: url('__ROOT__/public/Home/img/address.jpg') center center;animation:width 1s linear;animation-fill-mode: forwards;}
                                                @keyframes width{
                                                            0%{width: 0;opacity: 1}
                                                            50%{width: 100%;opacity: 1}
                                                           100%{width: 100%;opacity:0}
                                                        }
                                            #preview img{width: 100%;height: 100%}
                                            .inputPic{}
                                            .inputPic .inputjian{background:#fff;border: 1px solid #198cff;font-size: 16px;line-height:30px;border-radius: 15px;width: 100px;text-align: center;position: relative;display: inline-block;color: #198cff}
                                            .inputPic .inputjian:hover{background: #198cff;color:#fff;}
                                            .inputPic .inputjian input{height:30px;width: 100px;opacity: 0;display: block;position: absolute;top: 0;left: 0}
                                            .inputPic .picsize{display: inline-block;color: #999;margin-left: 10px;font-size:14px;vertical-align: bottom}
                                        </style>
                                        <script type="text/javascript">
                                            function preview(file) {
                                                var prevDiv = document.getElementById('preview');
                                                var prevDivYuan = document.getElementById('preview').innerHTML;
                                                if (file.files && file.files[0]) {
                                                    var reader = new FileReader();
                                                    reader.onload = function(evt) {
                                                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" /><span class="jindutiao"></span>';
                                                }
                                                reader.readAsDataURL(file.files[0]);
                                                } else {
                                                    prevDiv.innerHTML = prevDivYuan;
                                                    $(prevDiv).find("span").remove();
                                                }
                                            }
                                        </script>
                        </div>
                    </neq>
                    
                    <neq name="info.id" value="1">
                        
                        <div id="tab3" class="tab-pane">
                            <!-- <h1>百度编辑器</h1> -->
                            <textarea name="main" id="intro_detail" style="height: 500px;">{$info.main}</textarea>
                        </div>
                        <div class="form-group"></div>
                        </div>
                    </neq>
                </div>
                <div class="form-group"></div>
                <div class="form-group">
                    <input type="hidden" name="id" value="{$info.id|default=''}">
                    <input type="submit" style="width: 120px;" class="btn btn-primary" value="确定">
                    <button style="width: 120px;" class="btn btn-danger return" onclick="javascript:history.back(-1);return false;">取消</button>
                </div>
            </form>
        </div>
    </div>
</block>
